 <template>
  <notice :notice.sync="notice"></notice>
  <header-home :user.sync="user"></header-home>

  <div class="container">
      <div class="loading" v-if="loading">
          <i class="fa fa-spinner fa-spin fa-3x"></i>
      </div>
      <div class="row">
          <div class="col-md-8 col-md-offset-2" v-if="!loading">
                <div class="panel panel-default">
                	<div class="panel-heading">
                		<span class="title">通知</span>
                		<span class="pull-right"><a class="nodc-link-btn" @click="readAll">忽略未读</a></span>
                		<span class="pull-right"><a class="nodc-link-btn" data-toggle="modal" data-target="#del-notice">删除已读</a></span>
                	</div>
                	<div class="panel-body">
                		<div class="time row" v-if="notices.length===0"><div class="col-md-12">暂时没有通知</div></div>
                		<div class="notice-group" v-for="group in groups" v-if="notices.length>0">
                			<div class="time row">
                				<div class="col-md-12 text-muted">{{$key}}</div>
                			</div>
                			<div class="notice-item row" v-for="item in group">
                				<div class="col-md-1 notice-reddot"><span :class="{read: item.m_status > 0}"></span></div>
                				<div class="col-md-2">{{item.cla_name}}</div>
                				<div class="col-md-8">
	                				<a class="nodc-link-btn" @click="readAndGo($parent.$key, $index)">{{item.m_content}}
	                				</a>
                				</div>
                				<div class="col-md-1"><a class="nodc-link-btn ignore" v-if="item.m_status < 1" @click="read($parent.$key, $index)">忽略</a></div>
                			</div>
                		</div>
                	</div>
                </div>
            </div>
      </div>
      <modal type="modal-sm" id="del-notice" class="del-class-modal">
        <h4 class="modal-title text-danger" slot="header">删除通知</h4>
        <p slot="body">是否删除已读通知</p>
        <button slot="footer" type="button" class="btn btn-danger" @click="deleteRead">删除</button>
    </modal>
  </div>
  
</template>

<script>
import HeaderHome from '../../Component/HeaderHome/HeaderHome';
import Pagenation from '../../Component/Pagenation/Pagenation';
import Notice from '../../Component/Notice/Notice';
import auth from '../../Component/Auth/auth.js';
import Modal from '../../Component/Modal/Modal';

export
default {
    created: function () {
        var msgId = location.search.slice(1).split('=')[1];
        if (msgId) {
        	this.read(msgId, -1);
        }
        this.getNotices();
    },
    data() {
        return {
            msgId: -1,
            user: auth.getInfo(),
            notice: {
                type: 0,
                msg: ""
            },
            notices: [],
            loading: false,
            groups: {}
        }
    },
    components: {
        HeaderHome,
        Pagenation,
        Notice,
        Modal
    },
    methods: {
        getNotices: function() {
            this.loading = true;
            this.$http.post('/Message/messages').then(function(resp) {
                this.loading = false;
                this.notices = resp.data.data.message ? resp.data.data.message: [];
                this.notices.forEach((value) => {
                	// this.groups = {};
                	if (this.groups[value.m_date.substring(0, 10)]) {
                		this.groups[value.m_date.substring(0, 10)].push(value);
                	} else {
                		this.groups[value.m_date.substring(0, 10)] = [value];
                	}
                })
            },
            function(resp) {
                // error callback
                this.loading = false;
                this.notice = {
                    type: 0,
                    msg: resp.statusText
                };
            })
        },
        read: function(idOrKey, index, cb) {
        	var msgId = index === -1 ? idOrKey : this.groups[idOrKey][index].m_id;
        	if (this.groups[idOrKey][index].m_status > 0) {
        		if (cb) cb();
        	}
        	this.$http.post('/Message/read', {m_id: msgId}).then(function(resp) {
        		if (resp.data.status === 1) {
        			if (index === -1) {
        				this.getNotices();
        			} else {
        				this.groups[idOrKey][index].m_status = 1;
        			}
        			if (cb) {
        				cb();
        			}
        		}
            },
            function(resp) {
                // error callback
                this.notice = {
                    type: 0,
                    msg: resp.statusText
                };
            })
        },
        readAndGo: function (key, index) {
        	this.read(key, index, () => {
        		location.href = '/TestPaper/testPapers.html?cad='+this.groups[key][index].cla_id;
        	});
        },
        readAll: function () {
        	this.$http.post('/message/change').then(function(resp) {
        		this.notices.forEach((value) => {
                    value.m_status = 1;
                })
        	}, function(resp) {
        		// error callback
                this.notice = {type: 0, msg: resp.statusText};
        	})
        },
        deleteRead: function () {
        	if (this.notices.length === 0) {
                $('#del-notice').modal('toggle');
        		return;
        	}
        	this.$http.post('/message/delete').then(function(resp) {
                $('#del-notice').modal('toggle');
        		this.getNotices();
        	}, function(resp) {
        		// error callback
                this.notice = {type: 0, msg: resp.statusText};
        	})
        }
    }
}
</script>

<style scoped>
	.panel-heading span {
		line-height: 30px;
	}
    .panel-heading .title {
    	font-size: 19px;
    	margin-left: 20px;
    }
    .time, .notice-item, .notice-group {
    	border-bottom: 1px solid #ecf0f1;
    }
    .notice-item a {
    	color: #2c3e50;
    }
	.notice-item:last-child, .notice-group:last-child {
		border-bottom: 0;
	}
	.panel-heading .pull-right {
		margin-left: 5px;
	}
	.panel-body {
		padding: 0 15px;
	}
	.panel-body .row {
		padding: 20px;
	}
	.panel-body .time {
		padding: 15px 20px;
	}
	.notice-reddot {
		text-align: center
	}
	.notice-reddot span {
		display: inline-block;
		background-color: #f74c31;
		width: 8px;
		height: 8px;
		border-radius: 5px
	}
	.notice-reddot span.read {
		background-color: #ecf0f1;
	}
	.ignore {
		font-size: 14px;
		display: none;
	}
	.notice-item:hover .ignore {
		display: block;
	}
</style>